<template>
  <div class="level" :class="'level-'+level">
  </div>
</template>

<script>
  export default{
    name: 'serviceLevel',
    data () {
      return {
        level: 'cap'
      }
    }
  }
</script>
<style>
  .level {
    width: 25px;
    height: 22px;
  }

  .level-heart {
    background: url(../../assets/level.png) no-repeat 0 0;
  }
  .level-blue{
    background: url(../../assets/level.png) no-repeat -29px 0;
  }
  .level-cap{
    background: url(../../assets/level.png) no-repeat -58px 0;
  }
</style>
